<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">

<head th:replace="common/header::common_head"></head>
<link rel="stylesheet" href="../bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
<title>库存查询</title>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <div th:replace="common/LeftCommon::common_top_left"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
               库存查询
            </h1>
            <ol class="breadcrumb">
                <li><a href="/index"><i class="fa fa-dashboard"></i> 首页</a></li>
                <li><a href="#">仓库</a></li>
                <li class="active">库存查询</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <!-- /.box -->
                    <div class="box">
                        <div class="box-header">
                            <!-- checkbox -->
                            <div class="form-group">
                                <div class="row">
                                    <div class="col-xs-2">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id ="checkbox1" checked>
                                               <strong>过滤无库存</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox" id = "checkbox2" checked>
                                                <strong>库存预警</strong>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
                                                商品列表
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="radio">
                                            <label>
                                                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                                                单品列表
                                            </label>
                                        </div>
                                    </div>
                                    <div class="col-xs-2">
                                        <div class="checkbox">
                                            <label>
                                                <input type="checkbox">
                                                尺码横向
                                            </label>
                                        </div>
                                    </div>
                                    </div>
                            </div>

                        </div>
                        <!-- /.box-header -->
                        <div class="box-body">
                            <table id="example1" class="table table-bordered table-striped">
                                <thead>
                                <tr>
                                    <th>商品名称</th>
                                    <th>货号</th>
                                    <th>条码</th>
                                    <th>图片</th>
                                    <th>单品编码</th>
                                    <th>单品条码</th>
                                    <th>颜色</th>
                                    <th>尺码</th>
                                    <th>分类</th>
                                    <th>仓库</th>
                                    <th>单位</th>
                                    <th>库存预警下限</th>
                                    <th>库存预警上限</th>
                                    <th>当前库存数量</th>
                                    <th>库存盘点</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!--<tr th:each="good,goodStart : ${goodList}">-->
                                    <!--<td th:text="${good.getName()}"></td>-->
                                    <!--<td th:text="${good.getGoodsNumber()}"></td>-->
                                    <!--<td th:text="${good.getBarCode()}"></td>-->
                                    <!--<td th:text="${good.getImg_url()}"></td>-->
                                    <!--<td th:text="${good.getColor()}"></td>-->
                                    <!--<td th:text="${good.getSize()}"></td>-->
                                    <!--<td th:text="${good.getClassify()}"></td>-->
                                    <!--<td th:text="${good.getStoreName()}"></td>-->
                                    <!--<td th:text="${good.getUnit()}"></td>-->
                                    <!--<td th:text="${good.getStockMin()}"></td>-->
                                    <!--<td th:text="${good.getStockMax()}"></td>-->
                                    <!--<td th:text="${good.getStock()}"></td>-->
                                <!--</tr>-->
                                </tbody>
                            </table>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <footer class="main-footer">
        <div class="pull-right hidden-xs">
            <b>Version</b> 2.4.0
        </div>
        <strong>Copyright &copy; 2014-2016 <a href="https://adminlte.io">Almsaeed Studio</a>.</strong> All rights
        reserved.
    </footer>

    <!-- Add the sidebar's background. This div must be placed
         immediately after the control sidebar -->
    <div class="control-sidebar-bg"></div>
</div>
<!-- ./wrapper -->

<!-- jQuery 3 -->

<!-- Bootstrap 3.3.7 -->
<script src="../bower_components/jquery/dist/jquery.min.js"></script>
<script src="../bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- DataTables -->
<script src="../bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<!-- SlimScroll -->
<script src="../bower_components/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="../bower_components/fastclick/lib/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="../dist/js/adminlte.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="../dist/js/demo.js"></script>
<!-- page script -->
<script>
    var table;
    $(function () {
      table = $('#example1').DataTable({
            'paging'      : true,
            'lengthChange': false,
            'searching'   : true,
            'ordering'    : true,
            'info'        : true,
            'autoWidth'   : false,
            "scrollY": 200,
            "scrollX": true,
            "columnDefs": [
                  {
                      "targets": [ 4 ],
                      "visible": false,
                      "searchable": false
                  },
                  {
                      "targets": [ 5 ],
                      "visible": false,
                      "searchable": false
                  },
                {
                    "targets": [ 14 ],
                    "data":null,
                    "visible": false,
                    "searchable": false,
                    "defaultContent": "<button>Click!</button>"
                }
              ],
            ajax:{
                "url":"/store_query/goodList",
                "type":"get",
                "dataType":"json",
                "dataSrc":"",
            },
            "columns": [
                { "data": "name" },
                { "data": "goodsNumber" },
                { "data": "barCode" },
                { "data": "img_url" },
                { "data": "goodsId"},
                { "data": "onlyBarCode"},
                { "data": "color" },
                { "data": "size" },
                { "data": "classify" },
                { "data": "storeName" },
                { "data": "unit" },
                { "data": "stockMin" },
                { "data": "stockMax" },
                { "data":"stock" }
            ]
        });
    })

    $("#checkbox2").click(function () {
        if ($(this).prop("checked")) {
            table.column( 11 ).visible( true );
            table.column( 12 ).visible( true );
         } else {
            table.column( 11 ).visible( false );
            table.column( 12 ).visible( false );
         }
    });


    $("#optionsRadios2").click(function () {
        table.ajax.url( '/store_query/onlyGood' ).load();
        table.column( 4 ).visible( true );
        table.column( 5 ).visible( true );
        table.column( 14 ).visible( true );
    });

    $("#optionsRadios1").click(function () {
        table.ajax.url( '/store_query/goodList' ).load();
        table.column( 4 ).visible( false );
        table.column( 5 ).visible( false );
        table.column( 14 ).visible( false );
    });

</script>
</body>
</html>
